<template>
  <div class="home" style="font-family: 'Arial', sans-serif; background-color: #f0f2f5; min-height: 100vh; display: flex; flex-direction: column;">
    <header class="header" style="background-color: #ffffff;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
      <img src="/img.png" alt="img" style="width: 100%; height: 170px" />

    </header>
    <main class="main" style="flex: 1; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin: 20px;">
      <el-row class="search-container" style="margin-bottom: 10px;padding-left: 25%">
        <el-col :span="24">
          <el-form inline:true>
            <el-form-item>
              <el-input v-model="searchQuery" placeholder="搜索职位或公司" @input="fetchJobs" style="width: 65%; height: 50px;">
                <img src="/img2.jpg" alt="img">
                <template #append>
                  <el-button type="primary" @click="fetchJobs">搜索</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>

          <div class="tags-container">
            <span>推荐职位:</span>
            <div class="tags">
              <span>软件测试</span>
              <span>数据分析师</span>
              <span>c#</span>
              <span>java开发</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="main-container">
        <div class="container">
          <div v-for="(item, index) in paginatedItems" :key="index" @mouseenter="showExtraContainer(index)" @mouseleave="hideExtraContainer(index)" class="item-container">
            <p>
              <span class="title">{{ item.title }}&nbsp;&nbsp;&nbsp;</span>
              <span class="content">{{ item.content }}</span>
              <img src="/img3.webp" alt="img">
            </p>
            <div v-if="hoveredIndex === index" class="extra-container">
              <h3>{{ item.title }}</h3>
              <p>{{ item.content }}</p>
            </div>
          </div>
          <div class="pagination" style="float: left">
            <span>{{ currentPage }} / {{ totalPages }}</span>
            <div class="pagination-buttons">
              <img src="/left.svg" alt="svg" @click="prevPage" :disabled="currentPage === 1">
              <img src="/right.svg" alt="svg" @click="nextPage" :disabled="currentPage === totalPages">
            </div>
          </div>
        </div>
        <div class="image-container">
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item>
              <img src="/img4.webp" alt="img" class="carousel-image">
            </el-carousel-item>
            <el-carousel-item>
              <img src="/img5.webp" alt="img" class="carousel-image">
            </el-carousel-item>
            <el-carousel-item>
              <img src="/img6.webp" alt="img" class="carousel-image">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <h2 style="margin-left:200px;">职位推荐</h2>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(job, index) in jobs" :key="index">
          <el-card shadow="hover" class="box-card" @click="navigateToCompany(job.companyUrl)">
            <div slot="header" class="clearfix">
              <span class="job-title">{{ job.title }}</span>
            </div>
            <div class="job-details">
              <p><strong>地点:</strong> {{ job.location }}</p>
              <p><strong>薪资:</strong> {{ job.salary }}</p>
              <p><strong>描述:</strong> {{ job.description }}</p>
              <p><strong>要求:</strong> {{ job.requirements }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const searchQuery = ref('');
const router = useRouter();

const navigateToCompany = (url) => {
  router.push(url);
};

const jobs = ref([]);

const items = ref([
  { title: '技术', content: 'Java PHP Web前端 算法工程师' },
  { title: '产品', content: '产品经理 产品总监/vp 数据产品经理' },
  { title: '运营', content: '新媒体运营 产品运营 网络推广' },
  { title: '市场', content: '市场营销 市场推广 品牌公关' },
  { title: '销售', content: '销售专员 销售经理 销售工程师' },
  { title: '高级管理', content: '总裁/总经理/CEO 高级管理职位' },
  { title: '生产制造', content: '总裁/总经理/CEO 生产员 质量管理/测试' },
  { title: '采购/贸易', content: '采购经理/主管 采购主管' },
  { title: '供应链/物流', content: '物流专员 供应链经理' },
  { title: '人事/财务/财政', content: '人力资源/专员' }
]);

// 搜索关键词
const searchKeyword = ref('');
const fetchJobs =  () => {
  console.log('搜索关键词:', searchKeyword.value);
  if (searchKeyword.value.trim() === '') {
    axios.get(BASEURL+'/jobSeeker/getAllJobs').then((response) => {
      console.log('职位列表:', response.data);
      if (response.data.code === 2000) {
        jobs.value = response.data.data;
      } else {
        console.log(response.data.message);
      }
    });
  }else {
    axios.get(BASEURL+'/jobSeeker/getJobs?KeyWord=' + searchKeyword.value).then(response => {
      console.log(response);
      if (response.data.code===2000){
        jobs.value = response.data.data;
      }else {
        console.log(response.data.message);
      }
    })
  }
}
onMounted(() => {
  fetchJobs();
});


const currentPage = ref(1);
const itemsPerPage = ref(4);
const hoveredIndex = ref(null);

const totalPages = computed(() => Math.ceil(items.value.length / itemsPerPage.value));


const paginatedItems = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value;
  const end = start + itemsPerPage.value;
  return items.value.slice(start, end);
});

const showExtraContainer = (index) => {
  hoveredIndex.value = index;
};

const hideExtraContainer = () => {
  hoveredIndex.value = null;
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};


</script>

<style scoped>


.tags-container {
  display: flex;
  align-items: center;
}

.tags {
  display: flex;
  align-items: center;
  margin-left: 10px; /* 调整“推荐职位:”与标签之间的间距 */
  color: #007bff;
}

.tags span {
  margin-right: 10px; /* 添加右侧间距 */
  transition: color 0.3s ease; /* 平滑过渡效果 */
}

.tags span:hover {
  color: blue; /* 鼠标悬停时改变颜色 */
  cursor: pointer; /* 改变鼠标指针形状 */
  text-decoration: underline;
}

.container {
  width: 25%;
  height: auto;
  position: relative; /* 使用相对定位 */
  padding: 20px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-left: 200px;
}

.container p {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 添加段落间距 */
}

.container span {
  font-size: 16px;
}

.container .title {
  font-family: Arial-BoldMT, 'Arial Bold', Arial, sans-serif;
  font-weight: 700;
  color: #000;
  margin-right: 5px;
}

.container .content {
  font-family: ArialMT, Arial, sans-serif;
  font-weight: 400;
  color: #7f7f7f;
  margin-right: 5px;
}

.container img {
  width: 16px;
  height: 16px; /* 确保图片有固定的宽度和高度 */
  object-fit: cover; /* 保持图片比例并裁剪 */
  margin-left: auto; /* 图片右对齐 */
}

.pagination {
  display: flex;
  justify-content: space-between; /* 使子元素两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 10px;
}

.pagination-buttons {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.pagination img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: 0  20px; /* 减少左右两侧的间距 */
}
.extra-container {
  position: absolute; /* 使用绝对定位 */
  right: 0; /* 定位到右边 */
  left: 470px;
  top: 0; /* 定位到顶部 */
  width: 1000px;
  height: 1500px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;/* 设置更高的z-index以覆盖其他内容 */
}
.item-container {
  margin-bottom: 20px;
  transition: background-color 0.3s ease;
}
.item-container p {
  margin: 0;
}

.item-container:hover {
  background-color: #007bff;
}

.box-card {
  margin-bottom: 20px;
  cursor: pointer; /* 添加鼠标指针形状 */
  height: 200px; /* 设置固定高度 */
  padding: 20px; /* 增加内边距 */
  overflow: hidden; /* 防止内容溢出 */
  background-color: #9fc6f1;
}

.job-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px; /* 增加标题与内容之间的间距 */
}
.job-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 均匀分布内容 */
  height: calc(100% - 40px); /* 减去标题和底部的间距 */
}

.job-details p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.job-details strong {
  color: #333;
}

.image-container {
  width: 50%;
  height: 200px;
  margin-left: 20px;
  position: absolute;
  top: 0;
  right: 220px;
  z-index: 999;/* 设置较低的z-index以被.extra-container覆盖 */
}
.main-container{
  margin-bottom: 100px;
  position: relative;
  margin-top: 60px;
}
.image-container img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

</style>
